import { Tooltip } from "@mui/material";
import { GridActionsCellItem } from "@mui/x-data-grid";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import { useContext } from "react";
import Dataform from "../../../components/Dataform";
import { TitleContext } from "../../../router";
import GetChipType from "../../teacher/CourseApplication/GetChipType";
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import { renderCellExpand } from "../../../components/RenderCellExpand";
import { useMutation } from "@tanstack/react-query";
import { mutateQueryFn } from "../../../query/mutateQueryFn";
import { EXAM_APPLICATION_URL } from "../../../constants/url";
import { useSnackbar } from "notistack";
const tmpCourse = [
  {
    id: 1,
    name: "离散数学期末考试",
    date: "2022-11-15",
    betime: "12:00",
    teacher: "鹿旭东",
    endtime: "16:00",
    area: "学生在线会议室",
    courseId: "c101",
    status: 0,
  },
  {
    id: 4,
    name: "离散数学期末考试",
    date: "2022-12-24",
    betime: "12:00",
    courseId: "c120",
    endtime: "14:00",
    area: "学线办公室",
    teacher: "鹿旭东",
    status: "0",
  },
  {
    id: 5,
    name: "离散数学期末考试",
    date: "2022-12-24",
    courseId: "c120",
    betime: "12:00",
    teacher: "鹿旭东",
    endtime: "14:00",
    area: "学线办公室",
    status: "0",
  },
];

export default function ExamControl() {
  const nowTitle = useContext(TitleContext);

  const [rows, setRows] = useState([]);
  const {
    isLoading: getLoading,
    isSuccess: getSuccess,
    data: getData,
    mutate: getMutate,
  } = useMutation(["getCourseApplication"], mutateQueryFn);
  const {
    isLoading: changeLoading,
    isSuccess: changeSuccess,
    mutate: changeMutate,
  } = useMutation(["changeCourseApplication"], mutateQueryFn);

  useEffect(() => {
    getMutate({
      url: EXAM_APPLICATION_URL,
      method: "get",
      useToken: true,
    });
  }, []);

  useEffect(() => {
    if (getSuccess) {
      setRows(getData.data.data);
    }
  }, [getSuccess]);

  const handleAcceptClick = (id) => {
    //这里实现通过申请接口

    changeMutate({
      url: EXAM_APPLICATION_URL,
      method: "put",
      params: {
        id: id,
      },
      useToken: true,
    });
  };
  const handleRefuseClick = (id) => {
    //这里实现拒绝申请接口
    changeMutate({
      url: EXAM_APPLICATION_URL,
      method: "delete",
      params: {
        id: id,
      },
      useToken: true,
    });
  };
  const { enqueueSnackbar } = useSnackbar();
  useEffect(() => {
    if (changeSuccess) {
      enqueueSnackbar("操作成功", { variant: "success" });
      getMutate({
        url: EXAM_APPLICATION_URL,
        method: "get",
        useToken: true,
      });
    }
  }, [changeSuccess]);
  const columns = [
    {
      field: "id",
      headerName: "序号",
      width: 20,
    },
    {
      field: "courseId",
      headerName: "课序号",
      width: 100,
    },
    {
      field: "name",
      headerName: "名称",
      renderCell: renderCellExpand,
      flex: 2,
    },
    {
      field: "date",
      renderCell: renderCellExpand,
      headerName: "考试日期",
      flex: 2,
    },
    {
      field: "beginTime",
      headerName: "开始时间",
      flex: 1,
    },
    {
      field: "endTime",
      headerName: "结束时间",
      flex: 2,
    },
    {
      field: "teacher",
      headerName: "申请人",
      flex: 2,
    },
    {
      field: "area",
      renderCell: renderCellExpand,
      headerName: "考试地点",
      flex: 2,
    },

    {
      field: "status",
      headerName: "状态",
      renderCell: GetChipType,
      width: 100,
    },

    {
      field: "actions",
      type: "actions",
      headerName: "操作",
      width: 100,
      cellClassName: "actions",
      getActions: ({ id }) => {
        return [
          <Tooltip title="通过">
            <GridActionsCellItem
              icon={<CheckIcon />}
              label="Delete"
              onClick={() => handleAcceptClick(id)}
              color="inherit"
            />
          </Tooltip>,
          <Tooltip title="驳回">
            <GridActionsCellItem
              icon={<CloseIcon />}
              label="重置密码"
              onClick={() => handleRefuseClick(id)}
              color="inherit"
            />
          </Tooltip>,
        ];
      },
    },
  ];
  useEffect(() => {
    nowTitle.setnowTitle(4);
  }, []);

  return (
    <div>
      <Dataform
        loading={getLoading}
        fileName="考试申请"
        columns={columns}
        rows={rows}
      />
    </div>
  );
}
